<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base th:href="${#servletContext.getContextPath()+'/'}">

    <link rel="stylesheet" type="text/css" href="bootstrap-3.4.1/dist/css/bootstrap.css">
    <script type="text/javascript" src="jquery/jquery-3.6.1.min.js"></script>
    <script type="text/javascript" src="jquery/http.js"></script>

    <script type="text/javascript">
        function deleteSysUser(id) {
            console.log("异步删除:", id)
        }

        $(function () {
            $("#sysUserCheckFlag").change(function () {
                // 1.获取当前的状态值
                var val = $(this).prop("checked");
                console.log(val);

                // 2.获取需要被选中的元素
                $(".sysUserCheck").each(function () {
                    $(this).prop("checked", val);
                })
            });

            $("#sysUserBatchDel").click(function () {
                var array = new Array();
                // 获取用户勾选的数据
                $(".sysUserCheck:checked").each(function () {
                    // 把数组放到数组中
                    array.push($(this).val());
                })

                if (array.length > 0) {
                    // 发送请求
                    sendRequest("SystemUserServlet/batchDel", array, function (data) {
                        if (data.code == 200) {
                            location.reload();
                        }
                    });
                } else {
                    console.log("请先勾选数据")
                }
            });
        })
    </script>
</head>
<body>

<a href="/PageServlet/system/sysUser/sysUserAdd.html">添加</a>
<button class="button btn-danger" id="sysUserBatchDel">批量删除</button>
<table class="table">
    <tr>
        <th>
            <input type="checkbox" id="sysUserCheckFlag">
        </th>
        <th>id</th>
        <th>username</th>
        <th>sex</th>
        <th>email</th>
        <th>birthday</th>
        <th>操作</th>
    </tr>

    <tr th:each="sysUser:${sysUserList}">
        <td>
            <input class="sysUserCheck" type="checkbox" th:value="${sysUser.id}">
        </td>
        <td th:text="${sysUser.id}"/>
        <td th:text="${sysUser.username}"/>
        <td th:text="${sysUser.sex == 1?'男':'女'}"/>
        <td th:text="${sysUser.email}"/>
        <td th:text="${#dates.format(sysUser.birthday,'yyyy-MM-dd')}"/>
        <td>
            <a th:href="|SystemUserServlet/systemUserById?id=${sysUser.id}|">编辑</a>
            <a href="javascript:void(0)" th:onclick="|deleteSysUser(${sysUser.id})|">删除</a>
        </td>
    </tr>
</table>

</body>
</html>